import itemTpl from './tpl/item.tpl';
import wrapperTpl from './tpl/index.tpl';
import './index.scss';
import { tplReplace, scrollTop } from '../../libs/utils.js';

export default {
    name: 'navBar',
    _curIdx: 0,
    tpl(data){
        let itemList = '';

        data.map((item, index) => {
            itemList += tplReplace(itemTpl, {
                isCurrent: !index ?  'current' : '',
                title: item.chs,
                type: item.type
            })
        });


        return tplReplace(wrapperTpl, {
            itemList: itemList,
            wrapperW: 6 * data.length 
        });
    },
    bindEvent(setType){
        const oNavBar = document.querySelector('.nav');
        const oItems = document.querySelectorAll('.item');

        oNavBar.addEventListener('click',this._setNav.bind(this,oItems,setType),false)
    },
    _setNav(items, setType){
        const tar = arguments[2].target;
        const className = (tar.className).trim();
        

        if(className == 'item'){
            const type = tar.dataset.type;
            setType(type);
            scrollTop();
            items[this._curIdx].className = 'item';
            this._curIdx = [].indexOf.call(items,tar);
            items[this._curIdx].className += ' current';
        }
    }
}